<template>
    <ul class="footer">
        <li v-for="item in menu" :key="item.text" @click="go(item.path)">
            <i :class="item.icon"></i>
            <p>{{ item.text }}</p>
        </li>
    </ul>
</template>

<script>
export default {
    name: 'Footer',
    computed: {
        auths() {
            try {
                const raw = sessionStorage.getItem('authorities')
                if (!raw) return []
                try {
                    const parsed = JSON.parse(raw)
                    if (Array.isArray(parsed)) {
                        return parsed
                            .map(a => {
                                if (typeof a === 'string') return a
                                if (a && typeof a === 'object') return a.name ?? a.authority ?? a.role ?? ''
                                return ''
                            })
                            .filter(Boolean)
                            .map(s => String(s).toUpperCase())
                    }
                } catch { }
            } catch { }
            return String(raw).split(/[,\s]+/).filter(Boolean).map(s => s.toUpperCase())
        },
        isAdmin() { return this.auths.includes('ADMIN') },
        isBusiness() { return this.auths.includes('BUSINESS') },
        menu() {
            if (this.isAdmin) {
                const items = [
                    { icon: 'fa fa-home', text: '首页', path: '/userIndex' },
                    { icon: 'fa fa-cogs', text: '后台', path: '/administratorindex' },
                    { icon: 'fa fa-user-o', text: '我的', path: '/my' }
                ]
                return items
            }

            if (this.isBusiness) {
                return [
                    { icon: 'fa fa-home', text: '首页', path: '/userIndex' },
                    { icon: 'fa fa-briefcase', text: '发现', path: '/hongbao' },
                    { icon: 'fa fa-file-text-o', text: '订单', path: '/orderList' },
                    { icon: 'fa fa-briefcase', text: '商家中心', path: '/businessLogin' },
                    { icon: 'fa fa-user-o', text: '我的', path: '/my' },
                ]
            }

            return [
                { icon: 'fa fa-home', text: '首页', path: '/userIndex' },
                { icon: 'fa fa-briefcase', text: '发现', path: '/hongbao' },
                { icon: 'fa fa-file-text-o', text: '订单', path: '/orderList' },
                { icon: 'fa fa-user-o', text: '我的', path: '/my' }
            ]
        }
    },
    methods: {
        go(path) { this.$router.push({ path }) }
    }
}
</script>

<style>
.footer {
    width: 100%;
    height: 60px;
    border-top: solid 1px #DDD;
    background-color: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 2000;
}

.footer li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #999;
    user-select: none;
    cursor: pointer;
    flex: 1;
}

.footer li p {
    font-size: 14px;
    margin: 0;
}

.footer li i {
    font-size: 22px;
    margin-bottom: 4px;
}
</style>